<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3{
            height: 500px;
        }
    </style>
</head>
<body>
    <h3>滚动</h3>
    <h3>滚动</h3>
    <h3>滚动</h3>
    <h3>滚动</h3>
    <h3>滚动</h3>
    <h3>滚动</h3>
    <h3>滚动</h3>
    <h3>滚动</h3>
    <h3>滚动</h3>
</body>
</html>
<script>
    //防抖严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管容易引起浏览器卡死
    //从滚动条监听的例子说起
    //滚动事件
    window.onscroll = function(){
        console.log("滚动了")
        console.log(document.documentElement.scrollTop)
    }
    //在运行的时候会发现存在的问题，这个函数的默认执行频率，太高了。高到什么程度呢？以chrome为例
    // 我们可以点击选中一个页面的滚动条，然后点击一次键盘的【向下方向键】，就会发现函数执行了8-9次

    //然而实际我们并不需要如此高频的反馈，毕竟浏览器的性能是有限的，不应该浪费在这里，所以接着讨论如何优化这种场景
    //基于上述场景，首先提出第一种思路：在第一次触发时，不立即执行函数，而是给出一个期限值比如200ms,然后

    // 如果在200ms内没有再次触发滚动事件，那么就执行函数
    //如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始倒计时
    //效果：如果短时间内大量触发同一事件，只会执行一次函数

    //实现：既然前面都提到了计时，那实现的关键就在于setTime这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，
    // 可以借助闭包来实现

    function debounce(fun,delay){
       var timer = null
       return function(){
            if(timer){
                clearTimeout(timer)
            }
            timer = setTimeout(fun,delay)
       }
    }

    window.onscroll = debounce(scrollHandle,300)

    function scrollHandle(){
        var scrollTop = document.documentElement.scrollTop;
        console.log("滚动了",scrollTop)
    }

    //到这里，已经把防抖实现了
    //防抖定义：对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限
    // （如上面300毫秒内，事件处理函数只执行一次）

</script>